<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="icon iconfont">&#xe66b;</i>
        <span>{{ $t("patch.product") }}</span>
      </h2>
    </template>
    <template v-slot:content>
      <import-product
        :display="import_product_display"
        @click="handleSearch"
        :title="title"
        :detail="form"
        :type="type"
      ></import-product>
      <ky-table
        :getData="getProductList"
        :showSelect="showSelect"
        :search_data="search_data"
        ref="table"
      >
        <template v-slot:table-action>
          <authorization-button
            class="kylin-item-button"
            @click="handleImportProduct"
            name="Product:create"
            >{{ $t("patch.create_product") }}</authorization-button
          >
        </template>
        <template v-slot:table>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-form label-position="left" inline>
                <el-form-item :label="$t('description')">
                  <span>{{ scope.row.description }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column :label="$t('name')">
            <template slot-scope="scope">
              <router-link
                :to="`${$route.path}/${scope.row.id}/repositories?page=1&per_page=20`"
                @click.native="handleProdSelect(scope.row)"
              >
                {{ scope.row.name }}
              </router-link>
            </template>
          </el-table-column>

          <el-table-column prop="osName" :label="$t('patch.system_info')">
          </el-table-column>
          <el-table-column prop="osArch" :label="$t('patch.CPU_arch')">
          </el-table-column>
          <el-table-column :label="$t('action')">
            <template slot-scope="scope">
              <authorization-button
                @click.native.prevent="handleEdit(scope.row)"
                type="text"
                size="medium"
                name="Product:update"
              >
                {{ $t("edit") }}
              </authorization-button>
              <el-popconfirm
                :title="$t('patch.delete_product')"
                @confirm="handleDelete(scope.row)"
                icon-color="red"
                cancel-button-type="default"
                confirm-button-type="danger"
              >
                <authorization-button
                  type="text"
                  slot="reference"
                  size="medium"
                  class="kylin-delete"
                >
                  {{ $t("delete") }}
                </authorization-button>
              </el-popconfirm>
            </template>
          </el-table-column>
          <!-- <el-table-column :label="$t('patch.subscribed_system')">
            <template slot-scope="scope">
              <router-link
                :to="
                  $route.path +
                  '/' +9
                  scope.row.id +
                  '/hosts' +
                  '?page=1&per_page=20'
                "
              >
                {{ scope.row.description }}
              </router-link>
            </template>
          </el-table-column> -->
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import { getProductList, getProductTypes, deleteProduct } from "@/api/patch";
import importProduct from "./form/importProduct";
import AuthorizationButton from "@/components/AuthorizationButton";
export default {
  name: "product",
  components: {
    Page,
    kyTable,
    importProduct,
    AuthorizationButton,
  },
  activated() {
      this.$refs.table.handleSearch();
  },
  data() {
    return {
      import_product_display: false,
      showSelect: true,
      title: "",
      search_data: {
        name: {
          name: "name",
          type: "text",
        },
        osInfo: {
          name: "patch.system_info",
          type: "select",
          items: [],
          func: this.getProductTypes,
        },
        // osVersion: {
        //   name: "patch.system_info",
        //   type: "select",
        //   items: [],
        // },
        osArch: {
          name: "system.architecture",
          type: "select",
          items: [
            { key: "aarch64", name: "aarch64" },
            { key: "x86_64", name: "x86_64" },
          ],
        },
      },
      type: "",
      form: {},
    };
  },
  methods: {
    getProductList,
    handleDelete(data) {
      deleteProduct({ id: data.id }).then((res) => {
        if (res.data.code == "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
          this.$refs.table.handleSearch();
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
    getProductTypes() {
      getProductTypes().then((res) => {
        let results = res.data.data;
        results.forEach((item) => {
          this.search_data["osInfo"].items.push({ key: item, name: item });
        });
      });
    },
    handleEdit(data) {
      this.title = this.$t("patch.edit_product");
      this.type = "edit_prodcut";
      this.getProductList(data).then((res) => {
        this.form = res.data.data;
      });
      this.import_product_display = true;
    },
    handleImportProduct() {
      this.type = "create_prodcut";
      this.import_product_display = true;
      this.title = this.$t("patch.create_product");
    },
    handleSearch() {
      this.import_product_display = false;
      this.$refs.table.handleSearch();
    },
    handleProdSelect(data) {
      this.$store.commit("set_prod", { selectProd: data.name });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.size {
  width: 134px;
}
.label {
  font-weight: 600;
  margin-right: 10px;
}
</style>